<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 标签选择器：对指定的标签全都生效。如下设定的字体颜色为红色对所有的li标签均生效 */
        li {
            color: red;
            font-size: 20px;
        }

        p {
            color: black;
        }

        /* 类选择器：对class是指定类的所有元素生效。 */
        .one {
            color: skyblue;
        }
        /* id选择器：对id是指定id的一个元素生效。 */
        #two {
            font-size: 25px;
        }

        /* 统配符选择器：设定所有标签的margin为10，padding为0 */
        * {
            margin: 10;
            padding: 0;
        }
    </style>
</head>
<body>
    <h1>基础选择器</h1>
    <strong>目标：理解<span>选择器的作用</span>，能够使用基础选择器在HTML中<span>选择元素</span></strong>
    
    <h2>1. 选择器的作用</h2>
    <strong>通过选择器可以指定设定的一组样式对哪些HTML元素生效。即：指定生效的目标。</strong>
    
    <h2>2. 选择器的种类：</h2>
    <ul>
        <li>标签选择器：
            <p class="one">对所有指定的标签生效，不论这个标签在HTML中的哪个层级</p>
        </li>
        <li>类选择器：
            <p>说明：class选择器以点开头接类名来进行声明。</p>
            <p class="one">对class属性值是被选择类的所有元素均生效。（所有的标签都具备的一个属性——class，通过class属性可以给类设置类名。通过将多个标签定义为同一个类名，然后通过类选择器可以一次性设定这个类名的样式，哪怕这些类名对应的是彼此不同的标签。）</p>
            <p>补充：一个标签可以设定多个类名，通过空格隔开即可。若一个元素的多个类名对同一项样式设定了不同的值时，以最后那个类名对应的效果为准。因为类选择器的这一特性，所以在进行网页开发的时候，若发现有冗余代码做了大量同样样式设定的时候，可以通过类选择器来集中定义样式，这样一是简化了代码，二手方便“一处更改，处处生效”的效果。</p>
            <p>补充：类名可以使用字母、数字、下划线、中划线，但是只能以字母作为开头。</p>
        </li>
        <li>id选择器：
            <p>说明：id选择器以井号开头接id来进行声明。</p>
            <p>补充：每个id在一个HTML中只能标记到一个元素上。即：在同一个html中，id不能重复！</p>
            <p id="two">补充：因为id的不可重复性，使得id选择器只能选中一个元素。即：id选择器中定义的样式只能对一个元素生效。所以，一般而言，我们将会很少使用到id选择器来直接定义样式，但是id选择器定位精准这一特性使得我们可以利用id来让JavaScript定位元素精准的目的。所以，一般若需要通过JavaScript进行动态样式调整的时候会使用到id选择器。</p>
        </li>
        <li>通配符选择器：
            <p>说明：通配符选择器通过星号来进行元素选择，而且会选中html中所有的元素，上到顶级元素html，下到嵌套了多层的叶子节点元素。</p>
            <p>补充：一般而言，没有什么样式是可以适用给所有元素的，所以：通配符选择器很少使用。一般使用到统配符选择器时大都进行margin=0和padding=0的设置。</p>
        </li>
    </ul>
    

</body>
</html>